<template>
	<view class="main-contain">
		<!-- 标签页 -->
		<view>
			<u-sticky bgColor="#2C57F6">
				<u-tabs :list="stickyList" :current="currentTab" :itemStyle="{height:'70px',width:'75px'}"
					:activeStyle="{color:'#FFFFFF'}" @click="handleTabClick" :inactiveStyle="{color:'#000000'}"
					lineWidth="30px"></u-tabs>
			</u-sticky>
		</view>
		<!-- 艺术家信息 -->
		<view class="artist-contain">
			<u-scroll-list :indicator="false">
				<view class="info" v-for="(item, index) in artList" :key="index"
					:class="{ 'selected-item': currentArtistIndex === index }" @click="selectArtist(index, item)">
					<view class="avater">
						<u-avatar :src="item.stuUrl" size="80"></u-avatar>
					</view>
					<view class="detail-info">
						<view class="detail-info-iten">
							{{item.stuName}}
						</view>
						<view class="detail-info-iten">
							作品数:{{formateNumber(item.artworks)}}
						</view>
						<view class="detail-info-iten">
							获赞数:{{formateNumber(item.countVote)}}
						</view>
					</view>
				</view>
			</u-scroll-list>

		</view>
		<!-- 艺术家相册列表 -->
		<view class="art-contain">

			<view class="art-item" v-for="(item,index) in ablumList" :key="index">
				<view class="art-Img">
					<u-image :src="item.artworkLink" width="100%" height="170rpx" radius="18px"
						@click="previewImage(item.artworkLink)"></u-image>
				</view>
				<view class="art-info">
					<span class="label">名字:</span>
					<span class="info-style"> {{item.artworkTitle}}</span>
				</view>
				<view class="art-info">
					<span class="label">时间:</span>
					<span class="info-style">{{item.artworkTitle}}</span>
				</view>
				<view class="zan-contain">
					<view class="zan-left">
						<view class="zan-icon">
							<u-icon name='thumb-up-fill' color="red" size="32px"></u-icon>
						</view>
						<view class="zan-icon-num">
							{{formateNumber(item.likeCount)}}
						</view>

					</view>
					<view class="zan-right">
						<view class="AI-icon">
							<span class="AI-style">Ai</span>
						</view>
						<view class="AI-icon-num">
							<!-- {{item.Aicount}} -->
							0
						</view>
					</view>
				</view>
			</view>
			<view class="bottom-contain" v-show="!emptyShow">
				<u-loadmore :line="true" status="nomore"></u-loadmore>
			</view>
			<view v-show="emptyShow">
				<u-empty mode="car"
					icon="cloud://cloud1-6gveko5wef73d76d.636c-cloud1-6gveko5wef73d76d-1363348768/img/下载.jfif"
					text="相册暂无作品">
				</u-empty>
			</view>
		</view>
		<!-- 底部导航栏 -->
		<!-- <tabBar :page="page"></tabBar> -->
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	import {
		getUserChildInfo,
		queryStuAlbum
	} from '@/api/artalbum.js'
	export default {
		data() {
			return {
				user: {
					teacherId: 0,
					parentId: 1003,
				}, //当前用户信息，后期要从Token中获取

				currentTab: 2,
				stickyList: [{
						name: '校区作品'
					},
					{
						name: '投票'
					},
					{
						name: '艺术家相册'
					},
					{
						name: '社区'
					},
				],
				artList: [],
				ablumList: [],
				iconShow: true, //点赞状态显示
				currentArtistIndex: 0, // 当前选中的艺术家索引
				currentArtistID: 0, //当前学生/孩子ID
				emptyShow: false, //内容为空的显示
			}
		},
		created() {

			this.handleGetSamllArtList();
		},
		watch: {
			activeTab(newVal) {
				this.currentTab = newVal;
			}
		},
		computed: {
			...mapGetters(['getActiveTab']),

			// 简化访问
			activeTab() {
				return this.getActiveTab;
			}
		},
		onShow() {
			this.handleGetSamllArtList();
			this.currentTab = this.activeTab;
		},
		methods: {
			...mapActions(['updateActiveTab']),
			//获取小小艺术家消息（名称，作品数，获赞数）
			handleGetSamllArtList() {
				console.log("小小艺术家");
				const data = {
					parentId: this.user.parentId || 0,
					teacherId: this.user.teacherId || 0,
				}
				getUserChildInfo(data).then(res => {
					this.artList = res.data.childAlbums;
					this.currentArtistID = this.artList[0].stuId;
					this.queryCurrentAlbum();
				}).catch(err => {
					console.log("获取小小艺术家信息出错");
				})
			},
			//查询当前学生的艺术家相册
			queryCurrentAlbum() {
				console.log("当前学生的ID:", this.currentArtistID);
				const data = {
					stuId: this.currentArtistID
				}
				queryStuAlbum(data)
					.then(res => {
						console.log(res.data.userAlbums);
						this.ablumList = res.data.userAlbums;
						if (this.ablumList.length > 0) {
							this.emptyShow = false;
						} else {
							this.emptyShow = true;
						}
					}).catch(err => {
						close("查询当前学生的艺术家相册失败")
					})
			},
			// 更新当前Tab状态
			updateCurrentTab() {
				const app = getApp();
				if (this.currentTab !== app.globalData.currentTab) {
					this.currentTab = app.globalData.currentTab;
				}
			},

			// 标签跳转方法
			handleTabClick(e) {
				const tabIndex = e.index;
				this.updateActiveTab(tabIndex); // 更新 Vuex 状态

				if (tabIndex === 1) { // 点击"投票"标签
					console.log("跳转投票");
					uni.navigateTo({
						url: '/pages/voting event/voting event'
					});
				} else if (tabIndex === 0) {
					console.log("跳转校区作品");
					uni.switchTab({
						url: '/pages/art-gallery/art-gallery'
					});
				}else if(tabIndex === 3){
					console.log("跳转社区");
					uni.navigateTo({
						url: '/pages/community/community'
					});
				}
			},
			//图片预览
			previewImage(imgUrl) {
				const allImages = this.ablumList.map(item => item.artworkLink);
				uni.previewImage({
					current: imgUrl,
					urls: allImages
				});
			},
			//将数量转换成对应的格式（如15080转成1.5万）
			formateNumber(val) {
				const number = parseInt(val, 10);
				if (number >= 10000) {
					return (number / 10000).toFixed(1) + '万';
				}
				return number;
			},
			// 选中艺术家列表项
			selectArtist(index, item) {
				console.log(item);
				this.currentArtistIndex = index;
				this.currentArtistID = item.stuId;
				this.queryCurrentAlbum();
				console.log('选中艺术家:', item.stuName);
			},
		},

	}
</script>

<style lang="scss" scoped>
	.main-contain {
		.artist-contain {

			box-sizing: border-box;
			padding: 30rpx 60rpx;
			white-space: nowrap;
			overflow-x: auto;
			overflow-y: hidden;
			display: flex;
			flex-direction: row;

			.info {
				height: 100%;
				border: 1px solid gray;
				border-radius: 24rpx;

				padding: 15rpx;
				overflow: hidden;
				display: inline-block;
				margin-right: 20rpx;
				float: none;

				.avater {
					margin-right: 20rpx;
					float: none;
					display: inline-block;
				}

				.detail-info {
					float: none;
					display: inline-block;
					vertical-align: top;

					.detail-info-iten {
						padding: 7rpx 10rpx;
					}

				}

				&.selected-item {
					border: 2px solid #2C57F6;
					/* 蓝色边框 */
					background-color: rgba(44, 87, 246, 0.1);
					/* 浅蓝背景 */
					box-shadow: 0 4px 12px rgba(44, 87, 246, 0.3);
					/* 阴影效果 */
					position: relative;

					&::before {
						content: '';
						position: absolute;
						top: -4px;
						left: 50%;
						transform: translateX(-50%);
						width: 40rpx;
						height: 4px;
						background-color: #2C57F6;
						/* 顶部指示器 */
						border-radius: 2px;
					}
				}

			}
		}

		.art-contain {

			.art-item {
				width: 47vw;
				display: inline-block;
				margin: 1.4%;
				margin-bottom: 0;
				border-radius: 20rpx;
				box-sizing: border-box;
				border: 1px solid black;

				.art-Img {
					height: 50%;
					margin: 5rpx;
					border-radius: 30rpx;
					overflow: hidden;

				}

				.art-info {
					height: 40rpx;
					overflow: hidden;
					line-height: 40rpx;
					padding-left: 10%;
					margin-bottom: 15rpx;

					white-space: nowrap;
					text-overflow: ellipsis;
					width: 90%;

					.label {
						margin-right: 8px;
					}

					.info-style {
						font-size: 14px;
						color: #242424
					}
				}

				.zan-contain {
					height: 80rpx;
					box-sizing: border-box;
					margin: 0 20rpx 15rpx 20rpx;

					.zan-left {
						width: 60%;
						height: 100%;
						float: left;

						.zan-icon {
							width: 35%;
							height: 100%;
							float: left;

						}

						.zan-icon-num {
							width: 65%;

							float: right;
							height: 100%;
							line-height: 200%;
						}
					}

					.zan-right {
						width: 40%;
						height: 100%;

						float: right;

						.AI-icon {
							width: 40%;
							height: 100%;
							float: left;

							.AI-style {

								width: 60rpx;
								height: 60rpx;
								font-size: 24rpx;
								background-color: #0F40F5;
								color: #ffffff;
								font-size: 18px;
								border-radius: 8rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}

						.AI-icon-num {
							width: 55%;
							overflow: hidden;
							float: right;
							height: 100%;
							line-height: 200%;
							box-sizing: border-box;
							padding-left: 10rpx;
						}
					}
				}
			}

			.bottom-contain {}
		}
	}
</style>